<template>
    <my-float ref="float_addProduct" :title="`${this.yFree.yIsEmpty(id) ? '新增' : '编辑'}商品`" width="60%" @close="onClose">
        <div class="yContainerRowCenter_v input_row">
            <span>
                <span style="color: red;margin-right: 2px">*</span>
                <span>名称：</span>
            </span>
            <el-input class="yWeight" v-model="input_title"/>
        </div>
        <div v-if="this.yFree.yIsEmpty(id)" class="yContainerRowCenter_v input_row">
            <span>
                <span style="color: red;margin-right: 2px">*</span>
                <span>封面：</span>
            </span>
            <my-upload ref="uploader_main" ossPath="server/spu"/>
        </div>
        <div v-if="this.yFree.yIsEmpty(id)" class="yContainerRowCenter_v yWeight input_row">
            <span>视频：</span>
            <my-upload ref="uploader_video" ossPath="server/spu" fileType=".mp4" maxSize="10"/>
        </div>
        <div v-if="this.yFree.yIsEmpty(id)" class="yContainerRowCenter_v yWeight input_row">
            <span>轮播图片：</span>
            <my-upload ref="uploader_banner" ossPath="server/spu" maxCount="5"/>
        </div>
        <div v-if="this.yFree.yIsEmpty(id)" class="yContainerRowCenter_v yWeight input_row">
            <span>介绍图片：</span>
            <my-upload ref="uploader_detail" ossPath="server/spu" maxCount="10"/>
        </div>
        <div class="yContainerRowCenter_v input_row">
            <span>短描述：</span>
            <el-input class="yWeight" v-model="input_des"/>
        </div>
        <div class="yContainerRowCenter_v input_row">
            <span>短评：</span>
            <el-input class="yWeight" v-model="input_contentLike"/>
        </div>
        <div class="yContainerRowCenter_v input_row">
            <span>品牌：</span>
            <el-input class="yWeight" v-model="input_pinpai"/>
        </div>
        <div class="yContainerRowCenter_v input_row">
            <span>型号：</span>
            <el-input class="yWeight" v-model="input_xinghao"/>
        </div>
        <div class="yContainerRowCenter_v input_row">
            <span>
                <span style="color: red;margin-right: 2px">*</span>
                <span>支持退换：</span>
            </span>
            <el-radio-group v-model="radio_tuihuan">
                <el-radio label="1">支持</el-radio>
                <el-radio label="0">不支持</el-radio>
            </el-radio-group>
        </div>
        <div class="yContainerRowCenter_v" style="margin-top: 50px;">
            <div class="yWeight"/>
            <el-button type="primary" size="large" @click="commit">确认{{ this.yFree.yIsEmpty(id) ? '新增' : '编辑' }}</el-button>
        </div>
    </my-float>
</template>

<script>
export default {
    computed: {},
    props: {},
    data() {
        return {
            input_title: "", input_des: "", input_contentLike: "", input_pinpai: "", input_xinghao: "",
            radio_tuihuan: "0",
            id: null,
        }
    },
    beforeCreate() {
    },
    methods: {
        onClose() {
            this.id = null;
            this.radio_tuihuan = "0";
            this.input_title = "";
            this.input_des = "";
            this.input_contentLike = "";
            this.input_pinpai = "";
            this.input_xinghao = "";
        },
        show(model) {
            if (model != null) {
                this.id = model.id;
                this.input_title = model.title;
                this.input_des = model.des;
                this.input_contentLike = model.content_like;
                this.radio_tuihuan = model.params_tuihuan.toString();
                this.input_pinpai = model.params_pinpai;
                this.input_xinghao = model.params_xinghao;
            }
            this.$refs.float_addProduct.show();
        },
        dismiss() {
            this.$refs.float_addProduct.dismiss();
        },
        async commit() {
            if (this.yFree.yIsEmpty(this.input_title)) {
                this.yFree.yToast("请输入名称", "error");
                return;
            }
            if (this.yFree.yIsEmpty(this.id)) {
                let img_main = await this.$refs.uploader_main.upload();
                if (img_main == null) {
                    this.yFree.yToast("请上传封面", "error");
                    return;
                }
                let video = await this.$refs.uploader_video.upload();
                let img_banner = await this.$refs.uploader_banner.upload();
                let img_detail = await this.$refs.uploader_detail.upload();
                this.yFree.yPost(this, this.IJkid.spu_addOrEdit, {
                    "title": this.input_title,
                    "img_main": `/${img_main[0].name}`,
                    "video": video == null ? null : `/${video[0].name}`,
                    "img_banner": img_banner?.map((item) => `/${item.name}`).join("|"),
                    "img_detail": img_detail?.map((item) => `/${item.name}`).join("|"),
                    "des": this.input_des,
                    "content_like": this.input_contentLike,
                    "pinpai": this.input_pinpai,
                    "xinghao": this.input_xinghao,
                    "tuihuan": this.radio_tuihuan,
                }, (isSuccess, results) => {
                    if (isSuccess) {
                        this.$emit('onSuccess');
                        this.$refs.float_addProduct.dismiss();
                    }
                });
            } else {
                this.yFree.yPost(this, this.IJkid.spu_addOrEdit, {
                    "id": this.id,
                    "title": this.input_title,
                    "des": this.input_des,
                    "content_like": this.input_contentLike,
                    "pinpai": this.input_pinpai,
                    "xinghao": this.input_xinghao,
                    "tuihuan": this.radio_tuihuan,
                }, (isSuccess, results) => {
                    if (isSuccess) {
                        this.$emit('onSuccess');
                        this.$refs.float_addProduct.dismiss();
                    }
                });
            }
        },
    },
}
</script>

<style scoped>
.input_row {
    margin-bottom: 15px;
}

.input_row > span, .input_row > span > span {
    width: 80px;
    font-weight: bold;
}
</style>
